<template>
	<div>
		<div class="invoice_warp" style="margin-top: 0;">
			<div class="weui-cells weui-cells_form">
				<form method="post" id="form" action="##" enctype="multipart/form-data">
					<div class="weui-cell" style="padding: 0;">
						<div class="weui-cell__bd">
							<div class="weui-uploader__bd">
								<ul class="weui-uploader__files">
									<li class="weui-uploader__file"  v-for='(item,index) in liFiles' :key=index>
										<img :src="item" alt="" class="baseImg">
										<img src="../../images/delete.png" alt="" class="delete" @click="deleteClick(index)">
									</li>
								</ul>
								<div class="weui-uploader__input-box" v-if="this.singleUpload">
									<input id="uploaderInput" :multiple="Multiple"  class="weui-uploader__input js_file" type="file" accept="image/*"
									 @change="changeClick()" >
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		Dialog
	} from 'we-vue';
	export default {
		data() {
			return {
				liFiles: [],         
				singleUpload:true,  //控制上传还是显示
				form:new FormData()
			}
		},
		props:['childData'],
		created(){
			this.fileName = this.childData.fileName
			this.Multiple = this.childData.multiple  
		},
		methods: {
			changeClick(item) {
				let files = document.querySelector("#uploaderInput").files	
				
				/**
				 * 若是单张上传
				 */
				
				if(this.Multiple==false){   
					let reader = new FileReader()
					reader.readAsDataURL(files[0])
					reader.onload = (e) => {
						this.liFiles.push(e.target.result) 
						this.singleUpload = false
					}
					this.form.append(this.fileName,files[0])
				}else{
					/**
					 * 多张上传
					 */
					
					for (let i = 0; i < files.length; i++) {
						let reader = new FileReader()
						reader.readAsDataURL(files[i])
						reader.onload = (e) => {
							this.liFiles.push(e.target.result) 
						}
						this.form.append(this.fileName+i,files[i])
					}
				}				
				this.singleUpload = this.childData.singleUpload
				this.$emit('getChild',this.form)
			},
			deleteClick(index) {
				Dialog.confirm({
					title: '提示',
					message: '确认删除这张图片么？',
					showCancelButton: true
				}).then(() => {
					if(this.Multiple==false){
						this.form.delete(this.fileName,1)
					}else{
						this.form.delete(this.fileName+index,1)
					}				
					this.liFiles.splice(index,1)
					this.singleUpload = true
					this.$emit('getChild',this.form)
				})
			}
		}

	}
</script>

<style>
</style>
